<template>
  <div>
    <el-dialog
      title="用户注单详情"
      v-model="other.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="1160px"
      @closed="closed"
    >
      <div class="user-detail-dialog-box">
        <div class="form pb-[10px]">
          <el-row :gutter="12">
            <el-col :span="4">
              <el-input v-model="form.issue" placeholder="请输入期号" />
            </el-col>
            <el-col :span="4">
              <div class="flex items-center">
                <el-select class="!w-full" v-model="form.lottery_id">
                  <el-option label="全部游戏" value="-1" />
                  <el-option
                    v-for="item in gameTotal"
                    :key="item.LotteryId"
                    :label="item.Name"
                    :value="item.LotteryId"
                  />
                </el-select>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="w-full flex justify-between">
                <el-date-picker
                  v-model="form.date"
                  type="daterange"
                  unlink-panels
                  range-separator="－"
                  start-placeholder="选择开始时间"
                  end-placeholder="选择结束时间"
                  :disabled-date="disableFutureDates"
                />
              </div>
            </el-col>
            <el-col :span="6">
              <div class="flex items-center">
                <el-button type="primary" @click.stop="search">搜索</el-button>
                <el-button type="danger" @click.stop="handleRefresh">清空</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="grow-[1] h-0 overflow-hidden">
          <el-table
            scrollbar-always-on
            ref="elTableRef"
            v-loading="state.loading"
            :data="list"
            height="100%"
            border
            stripe
            fit
          >
            <template #empty>
              <ui-empty />
            </template>

            <el-table-column
              prop="LotteryName"
              align="center"
              label="游戏"
              show-overflow-tooltip
              width="80"
            />
            <el-table-column prop="BitchNo" align="center" label="期号" show-overflow-tooltip />
            <el-table-column
              prop="UserName"
              label="用户名"
              align="center"
              show-overflow-tooltip
              min-width="80"
            />
            <el-table-column prop="Note" align="center" label="备注" show-overflow-tooltip>
              <template #default="{ row }: TableItem">
                {{ row.Note || "--" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="Cat2"
              align="center"
              label="玩法"
              show-overflow-tooltip
              width="80"
            />
            <el-table-column
              prop="Cat3"
              align="center"
              label="下注内容"
              show-overflow-tooltip
              min-width="80"
            />
            <el-table-column prop="TotalAmount" align="center" label="下注金额" min-width="80">
              <template #default="{ row }: TableItem">
                <ui-amount :num="row.TotalAmount"></ui-amount>
              </template>
            </el-table-column>
            <el-table-column prop="CreatedAt" align="center" width="170" label="下注时间">
              <template #default="{ row }: TableItem">
                {{ formatDate(row.CreatedAt) }}
              </template>
            </el-table-column>
            <el-table-column prop="LuckCode" align="center" width="260" label="开奖结果">
              <template #default="{ row }: TableItem">
                <template v-if="row.LuckCode">
                  <template v-if="row.CategoryId == GameCategory.lhc">
                    <div>
                      <lhc-ball
                        class="!mr-[4px]"
                        :num="num"
                        :key="i"
                        v-for="(num, i) in formatNum(row)"
                      />
                    </div>
                  </template>
                  <template v-if="row.CategoryId == GameCategory.pcdd">
                    <div class="flex items-center justify-center">
                      <pcdd-ball class="!ml-[4px]" :num="formatNum(row)?.[0]" />
                      <pcdd-ball class="!ml-[4px]" :num="formatNum(row)?.[1]" />
                      <pcdd-ball class="!ml-[4px]" :num="formatNum(row)?.[2]" />
                      <span class="mx-[4px]">+</span>
                      <pcdd-ball :num="formatCount(row)" />
                    </div>
                  </template>
                  <template v-if="row.CategoryId == GameCategory.sc">
                    <div>
                      <sc-ball
                        class="!mr-[2px]"
                        :num="num"
                        :key="i"
                        v-for="(num, i) in formatNum(row)"
                      />
                    </div>
                  </template>
                  <template v-if="row.CategoryId == GameCategory.ssc">
                    <div>
                      <ssc-ball
                        class="!mr-[4px]"
                        :num="num"
                        :key="i"
                        v-for="(num, i) in formatNum(row)"
                      />
                    </div>
                  </template>
                </template>
                <template v-else>
                  <div>--</div>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="WinAmount" align="center" label="输赢">
              <template #default="{ row }: TableItem">
                <ui-amount :num="row.WinAmount"></ui-amount>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end mt-[10px] mx-[15px]">
          <ui-pagination
            :total="state.total"
            v-model:pageSize="state.pageSize"
            v-model:currentPage="state.page"
            @current-change="getData"
          ></ui-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import moment from "moment";

import { storeToRefs } from "pinia";
import { useGameStore } from "~/store/modules/game";
import { useList } from "@/hooks/useList";
import { reqReportUserOrderDetail } from "@/api/report";
import { getDateArray, disableFutureDates, formatDate } from "@/utils/common";
import { GameCategory } from "@/enums";

interface TableItem {
  row: ReportUserDetailMo;
}
interface Params {
  UserId: number;
  Issue?: string;
  LotteryId?: string;
  StartDate?: string;
  EndDate?: string;
}
const props = withDefaults(
  defineProps<{
    uid: number | undefined;
  }>(),
  {
    uid: undefined
  }
);
const gameStore = useGameStore();
const { gameTotal } = storeToRefs(gameStore);
const emit = defineEmits(["update"]);

const other = reactive({
  updating: false,
  isShow: false
});
const form = reactive({
  lottery_id: "-1",
  issue: "",
  date: getDateArray()["today"]
});

const getParams = () => {
  const params: Params = {
    UserId: props.uid as number,
    StartDate: moment(form.date[0]).format("YYYY-MM-DD 00:00:00"),
    EndDate: moment(form.date[1]).format("YYYY-MM-DD 23:59:59")
  };
  if (form.lottery_id && form.lottery_id != "-1") {
    params.LotteryId = form.lottery_id;
  }
  if (form.issue) {
    params.Issue = form.issue;
  }
  return params;
};

const { elTableRef, state, list, getData, search } = useList<ReportUserDetailMo, Params>(
  reqReportUserOrderDetail,
  getParams
);

const closed = () => {
  other.isShow = false;
  form.lottery_id = "-1";
  form.issue = "";
  form.date = getDateArray()["today"];
};

const open = () => {
  if (!props.uid) return;
  other.isShow = true;
  getData();
};

// 重置
const handleRefresh = () => {
  form.lottery_id = "-1";
  form.issue = "";
  form.date = getDateArray()["today"];
  search();
};

const formatNum = (row: ReportUserDetailMo) => {
  return row.LuckCode.split(",").map(Number);
};

const formatCount = (row: ReportUserDetailMo) => {
  return row.LuckCode.split(",")
    .map(Number)
    .reduce((a, b) => a + b, 0);
};

defineExpose({
  open
});
</script>
<style scoped lang="scss">
.user-detail-dialog-box {
  width: 100%;
  height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
:deep(.el-table) td .cell {
  padding: 0px 5px !important;
}
</style>
